<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色</title>
    <link rel="stylesheet" href="Bootstrap/css/bootstrap.css">
    <style>
        div{
            width: 350px;
            height: 50px;
            margin-bottom: 5px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>var color</h1>
        <div style="background-color:var(--bs-blue);">--bs-blue</div>
        <div style="background-color:var(--bs-indigo);">--bs-indigo</div>
        <div style="background-color:var(--bs-purple);">--bs-purple</div>
        <div style="background-color:var(--bs-pink);">--bs-pink</div>
        <div style="background-color:var(--bs-orange);">--bs-orange</div>
        <div style="background-color:var(--bs-yellow);">--bs-yellow</div>
        <div style="background-color:var(--bs-green);">--bs-green</div>
        <div style="background-color:var(--bs-teal);">--bs-teal</div>
        <div style="background-color:var(--bs-cyan);">--bs-cyan</div>
        <div style="background-color:var(--bs-white);">--bs-white</div>
        <div style="background-color:var(--bs-gray);">--bs-gray</div>
        <div style="background-color:var(--bs-gray-dark);color:var(--bs-white);">--bs-gray-dark</div>

        <div style="background-color:var(--bs-gray-100);">--bs-gray-100</div>
        <div style="background-color:var(--bs-gray-200);">--bs-gray-300</div>
        <div style="background-color:var(--bs-gray-300);">--bs-gray-300</div>
        <div style="background-color:var(--bs-gray-400);">--bs-gray-400</div>
        <div style="background-color:var(--bs-gray-500);">--bs-gray-500</div>
        <div style="background-color:var(--bs-gray-600);color:var(--bs-white);">--bs-gray-600</div>
        <div style="background-color:var(--bs-gray-700);color:var(--bs-white);">--bs-gray-700</div>
        <div style="background-color:var(--bs-gray-800);color:var(--bs-white);">--bs-gray-800</div>
        <div style="background-color:var(--bs-gray-900);color:var(--bs-white);">--bs-gray-900</div>

        <div style="background-color:var(--bs-primary);">--bs-primary</div>
        <div style="background-color:var(--bs-secondary);">--bs-secondary</div>
        <div style="background-color:var(--bs-success);">--bs-success</div>
        <div style="background-color:var(--bs-warning);">--bs-warning</div>
        
      
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="Bootstrap/js/bootstrap.bundle.js"></script>
    
</body>

</html>